<!-- 排班设置页 -->
<template>
  <div class="dashboard-container waybill-list customer-list-box">
    <div class="app-container">
      <el-card class="box-card">
        <el-button
          type="warning"
          style="padding: 9px 0px; margin-bottom: 20px; width: 120px"
          @click="addWorkPatterns"
        >添加工作模式</el-button>
        <!-- 列表 -->
        <el-table
          ref="multipleTable"
          v-loading="loading"
          element-loading-text="加载中"
          :data="tableData"
          stripe
          style="width: 100%; text-align: center"
        >
          <el-table-column
            label="工作模式编号"
            prop="id"
          > </el-table-column>
          <el-table-column
            label="工作模式"
            prop="name"
          > </el-table-column>
          <el-table-column
            label="类型"
            prop="workPatternType"
          >
            <template #default="{ row }">
              {{
                row.workPatternType === 1
                  ? '礼拜制'
                  : row.workPatternType === 2
                    ? '连续制'
                    : '其他'
              }}
            </template>
          </el-table-column>
          <el-table-column
            label="工作日期"
            prop="workDate"
          > </el-table-column>
          <el-table-column
            label="工作时间"
            prop="employeeNumber"
          >
            <template #default="{ row }">
              {{
                ((row.workEndMinute1 - row.workStartMinute1) / 60).toFixed(2)
              }}小时
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            header-align="center"
          >
            <template #default="{ row }">
              <el-link
                type="primary"
                @click="editWorkPatterns(row.id, row.workPatternType)"
              >编辑</el-link>
              <el-divider direction="vertical"></el-divider>
              <el-link
                type="danger"
                @click="delWorkPatterns(row.id)"
              >删除</el-link>
            </template>
          </el-table-column></el-table>

        <!-- 分页器 -->
        <div class="pagination">
          <el-pagination
            :current-page="pageParams.page"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pageParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
    <WorkArrangeSettingDialog
      ref="WorkArrangeSettingDialog"
      :dialog-title="dialogTitle"
      @closeDialog="closeDialog"
      @render="getWorkHistoryList"
    ></WorkArrangeSettingDialog>
  </div>
</template>

<script>
import WorkArrangeSettingDialog from './components/workArrangeSettingDialog.vue'
import { workHistoryList, deleteWorkHistory } from '@/api/transit'
export default {
  name: 'WorkArrangeSetting',
  components: {
    WorkArrangeSettingDialog
  },
  data() {
    return {
      tableData: [],
      pageParams: {
        page: 1,
        pageSize: 10
      },
      total: null,
      loading: false,
      dialogTitle: ''
    }
  },
  async mounted() {
    await this.getWorkHistoryList()
  },
  methods: {
    closeDialog() {
      if (this.$refs.WorkArrangeSettingDialog.dialogVisible === false) {
        return
      }
      if (this.$refs.WorkArrangeSettingDialog.liturgicalTabShow === true && this.$refs.WorkArrangeSettingDialog.$refs.liturgicalForm) {
        this.$refs.WorkArrangeSettingDialog.$refs.liturgicalForm.resetFields()
      }
      if (this.$refs.WorkArrangeSettingDialog.continuousTabShow === true && this.$refs.WorkArrangeSettingDialog.$refs.continuousForm) {
        this.$refs.WorkArrangeSettingDialog.$refs.continuousForm.resetFields()
      }
      this.$refs.WorkArrangeSettingDialog.dialogVisible = false
      this.$refs.WorkArrangeSettingDialog.continuousTabShow = true
      this.$refs.WorkArrangeSettingDialog.liturgicalTabShow = true
    },
    async getWorkHistoryList() {
      this.loading = true
      const { data: res } = await workHistoryList(this.pageParams)
      this.tableData = res.items
      this.total = +res.counts
      this.loading = false
    },
    addWorkPatterns() {
      this.$refs.WorkArrangeSettingDialog.dialogVisible = true
      this.dialogTitle = '添加工作模式'
    },
    async editWorkPatterns(id, workPatternType) {
      this.$refs.WorkArrangeSettingDialog.dialogVisible = true
      this.dialogTitle = '编辑工作模式'
      await this.$refs.WorkArrangeSettingDialog.getWorkHistoryInfo(
        id,
        workPatternType
      )
    },
    delWorkPatterns(id) {
      this.$confirm('确定要删除吗?', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await deleteWorkHistory(id)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          await this.getWorkHistoryList()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    handleSizeChange(val) {
      this.pageParams.pageSize = val
      this.pageParams.page = 1
      this.getWorkHistoryList()
    },
    handleCurrentChange(val) {
      this.pageParams.page = val
      this.getWorkHistoryList()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
/deep/ .table-card-box {
  .el-card__body {
    padding-bottom: 0px;
  }
}

/deep/ .pagination {
  padding-bottom: 30px;
}

.tab-box {
  color: #20232a;

  /deep/ .el-tabs__item.is-active {
    color: #20232a;
    font-size: 16px;
    font-weight: bold;
  }

  /deep/ .el-form-item__content {
    height: 40px;
  }

  /deep/ .el-tabs__item {
    font-size: 14px;
  }

  /deep/ .el-tabs__item:hover {
    color: #20232a;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }

  /deep/ .el-tabs__active-bar {
    background-color: #e15536;
  }

  /deep/ .tips {
    margin-left: 130px;
    margin-bottom: 14px;
    color: #bac0cd;
  }

  .el-checkbox {
    margin-right: 12px;
  }

  /deep/ .workDay {
    .el-form-item__error {
      position: relative;
    }
  }
}

/deep/ .el-dialog {
  width: 700px;

  /deep/ .el-dialog__body {
    padding-top: 30px !important;

    .el-tabs__header {
      padding-bottom: 25px;
    }
  }
}

/deep/ .el-tabs__nav,
.is-top {
  transform: translateX(30px) !important;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  padding-bottom: 40px;
}

/deep/ .pagination .el-pager li:hover {
  color: #e15536;
}

  /deep/ .el-pager li.active {
    color: #e15536;
    cursor: default;
  }
</style>
